<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
			padding: 0;
			list-style: none;
			
			}
			#box{
				width: 950px;
				height: 50px;
				margin: 250px;
				position: relative;
				float: left;
			}
			#progress{
				width: 900px;
				height: 40px;
				background-color: #CCCCCC;
				border-radius: 15px;
				position: relative;
				
			}
			#progressfg{
				width: 0px;
				height: 40px;
				background-color:orangered;
				border-radius: 15px;
				position: relative;
				top: -40px;
				
			}
			#bar{
				border-radius: 8px;
				width: 35px;
				height: 60px;
				background-color: orangered;
				position: absolute;
				top: -8px;
				cursor: pointer;
			}
			#value{
				float: right;
				text-align: center;
				
			}
		</style>
	</head>
	<body>
	<div id="box">
		<div id="progress"></div>
		<div id="progressfg"></div>
		<div id="bar"></div>
		<div id="value">0%</div>
	</div>
	
	<script> 
	window.onload = function(){
		var progress = document.getElementById('progress');
		var progressfg = document.getElementById('progressfg');
		var bar = document.getElementById('bar');
		var value = document.getElementById('value');
		
		bar.onmousedown = function(event){
			var e = event ||window.event;

			var left = e.clientX - bar.offsetLeft;
			console.log(bar.offsetLeft)
			bar.onmousemove = function(event){
				var e = event ||window.event;
				
			var x = e.clientX - left;
				//边界处理
				if(x < 0){
				    x = 0;
				}else if(x >= progress.offsetWidth - bar.offsetWidth){
				    x = progress.offsetWidth - bar.offsetWidth;
				}
				
				bar.style.left = x + 'px';
			   progressfg.style.width = x + 'px';
			   value.innerText = parseInt((bar.offsetWidth+progressfg.offsetWidth)/(progress.offsetWidth)*100) + '%';
				return false;
				
				}
			
			
			
			
			
		}
		
		
		
		document.onmouseup = function(){
			document.onmousemove = null;
		}
		
	}
	
	</script>
	</body>
</html>
